<template>
  <div id="bigscreen" @dblclick="exitFullscreen">
    <!-- 标题 -->
    <div class="title">
      <div class="left">
        <img
          src="../assets/BigScreen/title_left.png"
          alt=""
          style="width: 6.85rem; height: 1.05rem"
        />
        <img
          src="../assets/BigScreen/title_1.png"
          alt=""
          class="lefttext"
          style="width: 0.99rem; height: 0.24rem"
        />
      </div>
      <div class="center">
        <!-- <img :src="checkArea" alt="" style="width: 5.13rem; height: 0.58rem" /> -->
        <span>加砖信息社区居家养老数据平台</span>
      </div>
      <div class="right">
        <img
          src="../assets/BigScreen/title_right.png"
          alt=""
          style="width: 6.85rem; height: 1.05rem"
        />
        <img
          src="../assets/BigScreen/title_2.png"
          alt=""
          class="righttext"
          style="width: 0.99rem; height: 0.24rem"
        />
        <!-- <el-select
          v-if="isAdmin == 1"
          v-model="adminArearVal"
          class="select-areas"
          @change="adminSelectAreas"
        >
          <el-option
            v-for="i in areasOptions"
            :key="i.code"
            :label="i.value"
            :value="i.code"
          ></el-option>
        </el-select> -->
        <!-- <span> -->
        <!-- <i class="el-icon-full-screen" @click="fullScreen"></i>
        <i class="icon-exit-screen" @click="exitFullScreen"></i> -->
        <div class="biglist">
          <!-- <span class="btn" @click="largeScreen('#bigscreen')">街道大屏</span> -->
          <el-link href="http://39.100.254.133:1201/" target="_blank"
            >街道大屏</el-link
          >
          <i class="el-icon-full-screen" @click="toggleFullScreen"></i>
        </div>

        <!-- </span> -->
      </div>
    </div>
    <!-- 中间层 -->
    <div class="center">
      <div class="left">
        <div class="one">
          <div class="title">
            <img
              src="../assets/BigScreen/icon1.png"
              alt=""
              style="width: 0.16rem; height: 0.22rem"
            />
            <span>老人助餐累计消费金额</span>
          </div>
          <div class="content">
            <div class="xfje">
              <div v-for="(val, index) in Lxfje" :key="index">
                <img
                  src="../assets/BigScreen/gNum.png"
                  alt=""
                  :style="{
                    left: `-${(0.35 + 0.1666) * val}rem`,
                    height: `0.4rem`,
                    width: `5.01rem`,
                  }"
                />
              </div>
            </div>
            <!-- <img src="../assets/BigScreen/Num4.png" alt="" style="width:3.45rem;height:0.4rem"/> -->
          </div>
        </div>
        <div class="two">
          <div class="title">
            <img
              src="../assets/BigScreen/icon1.png"
              alt=""
              style="width: 0.16rem; height: 0.22rem"
            />
            <span>老人助餐累计消费人次</span>
          </div>
          <div class="content">
            <div class="xfrc">
              <div v-for="(val, index) in Lxfrc" :key="index">
                <img
                  src="../assets/BigScreen/gNum.png"
                  alt=""
                  :style="{
                    left: `-${(0.35 + 0.1666) * val}rem`,
                    height: `0.4rem`,
                    width: `5.01rem`,
                  }"
                />
              </div>
            </div>
            <!-- <img src="../assets/BigScreen/Num5.png" alt="" style="width:1.9rem;height:0.4rem"/> -->
            <span>人次</span>
          </div>
        </div>
        <div class="three">
          <div class="title">
            <img
              src="../assets/BigScreen/icon1.png"
              alt=""
              style="width: 0.16rem; height: 0.22rem"
            />
            <span>各社区今日消费情况统计</span>
          </div>
          <div class="list">
            <div>
              <div :style="{ left: `-${3.86 * scrollnum}rem` }">
                <div
                  v-for="(val, index) in parseInt(Lxftj.length / 5) + 1"
                  :key="index"
                >
                  <div
                    v-for="(val, index) in Lxftj.slice(
                      index * 5,
                      index * 5 + 5
                    )"
                    :key="index"
                  >
                    <span>{{ machine[val.xfjh].name }}-{{ val.money }}元</span>
                    <div class="outbox">
                      <div
                        class="innerbox"
                        :style="{ width: `${val.money / 6}%` }"
                      ></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="scroll">
            <!-- 点击按钮 -->
            <button
              v-for="(val, index) in parseInt(Lxftj.length / 5) + 1"
              :key="index"
              @click="changexfje(index)"
              :class="{ backblue: scrollnum == index }"
            ></button>
          </div>
        </div>
      </div>
      <div class="center">
        <div class="title">
          <!-- <img src="../assets/BigScreen/icon1.png" alt="" /> -->
          <img
            src="../assets/BigScreen/title_3.png"
            alt=""
            style="width: 1.48rem; height: 0.23rem"
          />
          <!-- <span>老人实时监控显示</span> -->
        </div>
        <div class="video">
          <div class="videoBox">
            <div
              id="myChartaa"
              :style="{ width: '4rem', height: '4rem' }"
            ></div>
            <div class="boxlist">
              <div v-if="aaa0Name">
                <div style="background-color: #ec7e34"></div>
                <span>{{ aaa0Name }}</span>
              </div>
              <div v-if="aaa1Name">
                <div style="background-color: #f1c433"></div>
                <span>{{ aaa1Name }}</span>
              </div>
              <div v-if="aaa2Name">
                <div style="background-color: #bcd643"></div>
                <span>{{ aaa2Name }}</span>
              </div>
              <div v-if="aaa3Name">
                <div style="background-color: #61c3cc"></div>
                <span>{{ aaa3Name }}</span>
              </div>
              <div v-if="aaa4Name">
                <div style="background-color: #4c9ad2"></div>
                <span>{{ aaa4Name }}</span>
              </div>
              <div v-else>
                <div style="background-color: #ec7e34"></div>
                <span>暂无数据</span>
              </div>
              <!-- <div>
                <div style="background-color: #216f6b"></div>
                <span>{{ aaa ? aaa[5].type : "" }}</span>
              </div> -->
              <!-- <div>
                <div style="background-color: #395858"></div>
                <span>其他街道</span>
              </div> -->
            </div>
          </div>
          <div class="oldPeople">
            <el-carousel
              height="2.91rem"
              direction="vertical"
              :interval="5000"
              indicator-position="none"
            >
              <el-carousel-item>
                <div class="listdiv">
                  <div>
                    <div>
                      <span>{{ alarmList[0].username }}老人</span
                      ><span class="warning">{{ alarmList[0].alarm_type }}</span
                      ><span class="time">{{ alarmList[0].start_time }}</span>
                    </div>
                    <span
                      >{{ alarmList[0].age }} {{ alarmList[0].sex }}
                      {{ alarmList[0].address }}</span
                    >
                  </div>
                  <div>
                    <div>
                      <span>{{ alarmList[1].username }}老人</span
                      ><span class="warning">{{ alarmList[1].alarm_type }}</span
                      ><span class="time">{{ alarmList[1].start_time }}</span>
                    </div>
                    <span
                      >{{ alarmList[1].age }} {{ alarmList[1].sex }}
                      {{ alarmList[1].address }}</span
                    >
                  </div>
                  <div>
                    <div>
                      <span>{{ alarmList[2].username }}老人</span
                      ><span class="warning">{{ alarmList[2].alarm_type }}</span
                      ><span class="time">{{ alarmList[2].start_time }}</span>
                    </div>
                    <span
                      >{{ alarmList[2].age }} {{ alarmList[2].sex }}
                      {{ alarmList[2].address }}</span
                    >
                  </div>
                </div>
              </el-carousel-item>
              <el-carousel-item>
                <div class="listdiv">
                  <div>
                    <div>
                      <span>{{ alarmList[3].username }}老人</span
                      ><span class="warning">{{ alarmList[3].alarm_type }}</span
                      ><span class="time">{{ alarmList[3].start_time }}</span>
                    </div>
                    <span
                      >{{ alarmList[3].age }} {{ alarmList[3].sex }}
                      {{ alarmList[3].address }}</span
                    >
                  </div>
                  <div>
                    <div>
                      <span>{{ alarmList[4].username }}老人</span
                      ><span class="warning">{{ alarmList[4].alarm_type }}</span
                      ><span class="time">{{ alarmList[4].start_time }}</span>
                    </div>
                    <span
                      >{{ alarmList[4].age }} {{ alarmList[4].sex }}
                      {{ alarmList[4].address }}</span
                    >
                  </div>
                  <div>
                    <div>
                      <span>{{ alarmList[5].username }}老人</span
                      ><span class="warning">{{ alarmList[5].alarm_type }}</span
                      ><span class="time">{{ alarmList[5].start_time }}</span>
                    </div>
                    <span
                      >{{ alarmList[5].age }} {{ alarmList[5].sex }}
                      {{ alarmList[5].address }}</span
                    >
                  </div>
                </div>
              </el-carousel-item>
              <el-carousel-item>
                <div class="listdiv">
                  <div>
                    <div>
                      <span>{{ alarmList[6].username }}老人</span
                      ><span class="warning">{{ alarmList[6].alarm_type }}</span
                      ><span class="time">{{ alarmList[6].start_time }}</span>
                    </div>
                    <span
                      >{{ alarmList[6].age }} {{ alarmList[6].sex }}
                      {{ alarmList[6].address }}</span
                    >
                  </div>
                  <div>
                    <div>
                      <span>{{ alarmList[7].username }}老人</span
                      ><span class="warning">{{ alarmList[7].alarm_type }}</span
                      ><span class="time">{{ alarmList[7].start_time }}</span>
                    </div>
                    <span
                      >{{ alarmList[7].age }} {{ alarmList[7].sex }}
                      {{ alarmList[7].address }}</span
                    >
                  </div>
                  <div>
                    <div>
                      <span>{{ alarmList[8].username }}老人</span
                      ><span class="warning">{{ alarmList[8].alarm_type }}</span
                      ><span class="time">{{ alarmList[8].start_time }}</span>
                    </div>
                    <span
                      >{{ alarmList[8].age }} {{ alarmList[8].sex }}
                      {{ alarmList[8].address }}</span
                    >
                  </div>
                </div>
              </el-carousel-item>
              <el-carousel-item>
                <div class="listdiv">
                  <div>
                    <div>
                      <span>{{ alarmList[9].username }}老人</span
                      ><span class="warning">{{ alarmList[9].alarm_type }}</span
                      ><span class="time">{{ alarmList[9].start_time }}</span>
                    </div>
                    <span
                      >{{ alarmList[9].age }} {{ alarmList[9].sex }}
                      {{ alarmList[9].address }}</span
                    >
                  </div>
                  <div>
                    <div>
                      <span>{{ alarmList[10].username }}老人</span
                      ><span class="warning">{{
                        alarmList[10].alarm_type
                      }}</span
                      ><span class="time">{{ alarmList[10].start_time }}</span>
                    </div>
                    <span
                      >{{ alarmList[10].age }} {{ alarmList[10].sex }}
                      {{ alarmList[10].address }}</span
                    >
                  </div>
                  <div>
                    <div>
                      <span>{{ alarmList[11].username }}老人</span
                      ><span class="warning">{{
                        alarmList[11].alarm_type
                      }}</span
                      ><span class="time">{{ alarmList[11].start_time }}</span>
                    </div>
                    <span
                      >{{ alarmList[11].age }} {{ alarmList[11].sex }}
                      {{ alarmList[11].address }}</span
                    >
                  </div>
                </div>
              </el-carousel-item>
              <el-carousel-item>
                <div class="listdiv">
                  <div>
                    <div>
                      <span>{{ alarmList[12].username }}老人</span
                      ><span class="warning">{{
                        alarmList[12].alarm_type
                      }}</span
                      ><span class="time">{{ alarmList[12].start_time }}</span>
                    </div>
                    <span
                      >{{ alarmList[12].age }} {{ alarmList[12].sex }}
                      {{ alarmList[12].address }}</span
                    >
                  </div>
                  <div>
                    <div>
                      <span>{{ alarmList[13].username }}老人</span
                      ><span class="warning">{{
                        alarmList[13].alarm_type
                      }}</span
                      ><span class="time">{{ alarmList[13].start_time }}</span>
                    </div>
                    <span
                      >{{ alarmList[13].age }} {{ alarmList[13].sex }}
                      {{ alarmList[13].address }}</span
                    >
                  </div>
                  <div>
                    <div>
                      <span>{{ alarmList[14].username }}老人</span
                      ><span class="warning">{{
                        alarmList[14].alarm_type
                      }}</span
                      ><span class="time">{{ alarmList[14].start_time }}</span>
                    </div>
                    <span
                      >{{ alarmList[14].age }} {{ alarmList[14].sex }}
                      {{ alarmList[14].address }}</span
                    >
                  </div>
                </div>
              </el-carousel-item>
              <el-carousel-item>
                <div class="listdiv">
                  <div>
                    <div>
                      <span>{{ alarmList[15].username }}老人</span
                      ><span class="warning">{{
                        alarmList[15].alarm_type
                      }}</span
                      ><span class="time">{{ alarmList[15].start_time }}</span>
                    </div>
                    <span
                      >{{ alarmList[15].age }} {{ alarmList[15].sex }}
                      {{ alarmList[15].address }}</span
                    >
                  </div>
                  <div>
                    <div>
                      <span>{{ alarmList[16].username }}老人</span
                      ><span class="warning">{{
                        alarmList[16].alarm_type
                      }}</span
                      ><span class="time">{{ alarmList[16].start_time }}</span>
                    </div>
                    <span
                      >{{ alarmList[16].age }} {{ alarmList[16].sex }}
                      {{ alarmList[16].address }}</span
                    >
                  </div>
                  <div>
                    <div>
                      <span>{{ alarmList[17].username }}老人</span
                      ><span class="warning">{{
                        alarmList[17].alarm_type
                      }}</span
                      ><span class="time">{{ alarmList[17].start_time }}</span>
                    </div>
                    <span
                      >{{ alarmList[17].age }} {{ alarmList[17].sex }}
                      {{ alarmList[17].address }}</span
                    >
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
        <div class="Num">
          <div>
            <span>老人数量</span>
            <div>
              <img
                :src="require(`../assets/BigScreen/bNum_${item}.png`)"
                alt=""
                v-for="(item, index) in OlderCount"
                :key="index"
              />
            </div>
          </div>

          <div>
            <span>护理记录</span>
            <div>
              <img
                :src="require(`../assets/BigScreen/gNum_${item}.png`)"
                alt=""
                v-for="(item, index) in NurseDataCount"
                :key="index"
              />
            </div>
          </div>
          <div>
            <span>呼叫记录(未处理)</span>
            <div>
              <img
                :src="require(`../assets/BigScreen/RNum_${item}.png`)"
                alt=""
                v-for="(item, index) in AlarmCount"
                :key="index"
              />
            </div>
          </div>
          <div>
            <span>呼叫记录(已处理)</span>
            <div>
              <img
                :src="require(`../assets/BigScreen/RNum_${item}.png`)"
                alt=""
                v-for="(item, index) in AlarmRecord"
                :key="index"
              />
            </div>
          </div>
        </div>
        <div class="title1" style="height: 0.4rem">
          <img
            src="../assets/BigScreen/icon1.png"
            alt=""
            style="width: 0.16rem; height: 0.22rem"
          />
          <span>实时报警监测</span>
        </div>
        <div class="Num2">
          <div>
            <div>
              <img
                src="../assets/BigScreen/icon2.png"
                alt=""
                style="width: 0.28rem; height: 0.28rem"
              /><span>主动呼叫</span>
            </div>
            <div>
              <img
                :src="require(`../assets/BigScreen/RNum_${item}.png`)"
                alt=""
                v-for="(item, index) in alarmType1"
                :key="index"
              />
            </div>
          </div>
          <div>
            <div>
              <img
                src="../assets/BigScreen/icon3.png"
                alt=""
                style="width: 0.33rem; height: 0.33rem"
              /><span>红外感应</span>
            </div>
            <div>
              <img
                :src="require(`../assets/BigScreen/RNum_${item}.png`)"
                alt=""
                v-for="(item, index) in alarmType2"
                :key="index"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="one">
          <div class="title">
            <img
              src="../assets/BigScreen/icon1.png"
              alt=""
              style="width: 0.16rem; height: 0.22rem"
            />
            <span>累计评估老人</span>
          </div>
          <div class="content">
            <div class="xfje">
              <div v-for="(val, index) in Rljpg" :key="index">
                <img
                  src="../assets/BigScreen/oNum.png"
                  alt=""
                  :style="{
                    left: `-${(0.35 + 0.1666) * val}rem`,
                    height: `0.4rem`,
                    width: `5.01rem`,
                  }"
                />
              </div>
            </div>
          </div>
        </div>
        <div class="three">
          <div class="title">
            <img
              src="../assets/BigScreen/icon1.png"
              alt=""
              style="width: 0.16rem; height: 0.22rem"
            />
            <span>老人评估情况</span>
          </div>
          <div class="pieimg" id="pieimg">
            <!-- <img
              src="../assets/BigScreen/pie2.png"
              alt=""
              style="width: 1.26rem; height: 1.26rem"
            /> -->
          </div>
          <!-- R3 -->
          <div class="pielist">
            <div>
              <div>
                <div>
                  <div :style="{ backgroundColor: `#00C6D7` }"></div>
                  <span>能力完好</span>
                </div>
                <span>{{ Rpgqk[0] ? Rpgqk[0].num : "" }}人</span>
              </div>
              <div>
                <div>
                  <div :style="{ backgroundColor: `#71C400` }"></div>
                  <span>轻度失能</span>
                </div>
                <span>{{ Rpgqk[1] ? Rpgqk[1].num : "" }}人</span>
              </div>
            </div>
            <div>
              <div>
                <div>
                  <div :style="{ backgroundColor: `#E9551B` }"></div>
                  <span>中度失能</span>
                </div>
                <span>{{ Rpgqk[2] ? Rpgqk[2].num : "" }}人</span>
              </div>
              <div>
                <div>
                  <div :style="{ backgroundColor: `#F4282D` }"></div>
                  <span>重度失能</span>
                </div>
                <span>{{ Rpgqk[3] ? Rpgqk[3].num : "" }}人</span>
              </div>
            </div>
          </div>
          <div class="list">
            <div style="backgroundcolor: #0d6ddd" class="title">
              <span style="color: white">居住情况</span
              ><span style="color: white">人数</span>
            </div>
            <div class="qk">
              <div :style="{ left: `-${3.86 * scrollnum2}rem` }">
                <div
                  v-for="index in parseInt(Rjzqk.length / 5) + 1"
                  :key="index"
                >
                  <div
                    v-for="(val, index2) in Rjzqk.slice(
                      (index - 1) * 5,
                      (index - 1) * 5 + 5
                    )"
                    :key="index2"
                  >
                    <span>{{ jzqklist[val.type] }}</span
                    ><span>{{ val.num }}人</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="scroll">
            <!-- 点击按钮 -->
            <button
              v-for="(val, index) in parseInt(Rjzqk.length / 5) + 1"
              :key="index"
              @click="changejzqk(index)"
              :class="{ backblue: scrollnum2 == index }"
            ></button>
          </div>
        </div>
      </div>
    </div>
    <!-- 尾层 -->
    <div class="tail">
      <!-- 左下 -->
      <div class="left">
        <div class="text">
          <span>各年龄段老人数量情况</span>
          <div>
            <span>共计</span>
            <div>
              <div v-for="(val, index) in Llxtj" :key="index">
                <img
                  src="../assets/BigScreen/bNum.png"
                  alt=""
                  :style="{
                    left: `-${(0.35 + 0.1666) * val}rem`,
                    height: `0.4rem`,
                    width: `5.01rem`,
                  }"
                />
              </div>
            </div>
            <!-- <img src="../assets/BigScreen/Num7.png" alt="" style="width:1.42rem;height:0.4rem"/> -->
          </div>
        </div>
        <div id="chartsLB"></div>
        <!-- <img src="../assets/BigScreen/pie1.png" alt="" style="width:1.65rem;height:1.08rem"/> -->
        <div class="pie">
          <div>
            <div>
              <div style="background-color: #0db3d9"></div>
              <span>60岁以下老人</span>
              <span>{{ LlxtjList.A }}人</span>
            </div>
            <div>
              <div style="background-color: #0367a6"></div>
              <span>60-70岁老人</span>
              <span>{{ LlxtjList.B }}人</span>
            </div>
          </div>
          <div>
            <div>
              <div style="background-color: #d93d4a"></div>
              <span>70-80岁老人</span>
              <span>{{ LlxtjList.C }}人</span>
            </div>
            <div>
              <div style="background-color: #f2cb05"></div>
              <span>80-90岁老人</span>
              <span>{{ LlxtjList.D }}人</span>
            </div>
          </div>
          <div>
            <div>
              <div style="background-color: #f29422"></div>
              <span>五类老人</span>
              <span>{{ LlxtjList.E }}人</span>
            </div>
            <div>
              <div style="background-color: #92c8b1"></div>
              <span>储值卡</span>
              <span>{{ LlxtjList.F }}人</span>
            </div>
            <div>
              <div style="background-color: #2f4553"></div>
              <span>员工卡</span>
              <span>{{ LlxtjList.G }}人</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 右下 -->
      <div class="right">
        <div class="text">
          <span>各评估结果年龄段分布</span>
          <div>
            <div>
              <div v-for="(val, index) in Rzrc" :key="index">
                <img
                  src="../assets/BigScreen/bNum.png"
                  alt=""
                  :style="{
                    left: `-${(0.35 + 0.1666) * val}rem`,
                    height: `0.4rem`,
                    width: `5.01rem`,
                  }"
                />
              </div>
            </div>
            <span>人次</span>
          </div>
        </div>
        <!-- <button>&lt;</button> -->
        <!-- B2 -->
        <div class="list">
          <div :style="{ left: `-${5.3 * scrollnum3}rem` }">
            <div v-for="(val, index) in pgtotal" :key="index">
              <div>
                <div :style="{ backgroundColor: color1[index] }"></div>
                <span>{{ text1[index] }}</span
                ><span>{{ val }}人</span>
              </div>
              <div v-for="(val2, index2) in pglist[index]" :key="index2">
                <span>{{ val2.region }}</span>
                <div>
                  <div
                    :style="{
                      width: `${((val2.num / val) * 100).toFixed(2)}%`,
                      backgroundColor: color2[index2],
                    }"
                  ></div>
                </div>
                <span>{{ `${((val2.num / val) * 100).toFixed(2)}%` }}</span>
                <span>{{ val2.num }}人</span>
              </div>
            </div>
          </div>
          <!-- 右下list -->
        </div>
        <button @click="changeRB()">
          <img
            :src="
              scrollnum3 == 0
                ? require('../assets/BigScreen/btnr.png')
                : require('../assets/BigScreen/btnl.png')
            "
            alt=""
            style="width: 0.16rem; height: 0.26rem"
          />
        </button>
      </div>
    </div>
    <!-- 拖动video -->
    <div class="blackBox" v-if="videoshow">
      <div class="theVideo">
        <div class="boxBar">
          <button @click="videoclick()">×</button>
        </div>
        <div class="videoBox">
          <div class="input_video">
            <video-player
              class="video-player vjs-custom-skin"
              ref="videoPlayer"
              :playsinline="true"
              :options="playerOptions"
            ></video-player>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import screenfull from "screenfull";
export default {
  data() {
    return {
      myVideo: "",
      videojs: "",
      videoshow: false,
      // 视频播放
      shequ: [
        { a: "公园社区养老服务中心-9863元", b: "90" },
        { a: "鹰西社区养老服务中心-8562元", b: "80" },
        { a: "磷肥厂社区居家养老服务中心-7468元", b: "70" },
        { a: "民欣社区养老服务中心-6582元", b: "65" },
        { a: "桃园社区居家养老服务中心-6232元", b: "60" },
      ],
      // L消费金额
      Lxfje: [],
      // L消费人次
      Lxfrc: [],
      // L类型统计
      Llxtj: [],
      LlxtjList: {
        A: 0,
        B: 0,
        C: 0,
        D: 0,
        E: 0,
        F: 0,
        G: 0,
      },
      // L消费统计
      Lxftj: [],
      // R累计评估
      Rljpg: [],
      // R老人评估情况
      Rpgqk: [],
      // R居住情况
      Rjzqk: [],
      // 年龄分布情况
      pgtotal: [],
      pglist: [],
      jzqklist: [
        "独居",
        "与配偶/伴侣居住",
        "与子女居住",
        "与父母居住",
        "与兄弟姐妹居住",
        "与其他亲属居住",
        "与非亲属关系的人居住",
        "养老机构",
      ],
      // R各年龄段分布
      Rzrc: [],
      machine: {
        2: { name: "贵溪铜苑社区养老服务中心" },
        3: { name: "鹰西社区养老服务中心" },
        4: { name: "西湖社区居家养老服务中心" },
        5: { name: "桃园社区居家养老服务中心" },
        7: { name: "公园社区养老服务中心" },
        8: { name: "民欣社区养老服务中心" },
        9: { name: "磷肥厂社区居家养老服务中心" },
        10: { name: "贵溪花园社区养老服务中心" },
        11: { name: "贵溪武陵社区养老服务中心" },
        12: { name: "贵溪贵化社区养老服务中心" },
        13: { name: "贵溪芗溪社区养老服务中心" },
        14: { name: "西站社区养老服务中心" },
        15: { name: "贵溪仙桥社区养老服务中心" },
        16: { name: "西门社区居家养老服务中心" },
        17: { name: "大塘社区养老服务中心" },
      },
      text1: ["能力完好", "轻度失能", "中度失能", "重度失能"],
      color1: ["#00C6D7", "#71C400", "#E9551B", "#F4282D"],
      color2: ["#00AF6E", "#1791FF", "#E4AF09", "#F34D61"],
      scrollnum: 0,
      scrollnum2: 0,
      scrollnum3: 0,
      aaa: [],
      AlarmCount: null, //未完成报警
      AlarmRecord: null, //已完成报警
      NurseDataCount: null,
      OlderCount: null,
      // 报警列表循环次数
      frequency: 6,
      alarmList: [
        {
          username: "",
          alarm_type: "",
          create_time: "",
          age: "",
          sex: "",
          address: "",
        },
        {
          username: "",
          alarm_type: "",
          create_time: "",
          age: "",
          sex: "",
          address: "",
        },
        {
          username: "",
          alarm_type: "",
          create_time: "",
          age: "",
          sex: "",
          address: "",
        },
        {
          username: "",
          alarm_type: "",
          create_time: "",
          age: "",
          sex: "",
          address: "",
        },
        {
          username: "",
          alarm_type: "",
          create_time: "",
          age: "",
          sex: "",
          address: "",
        },
        {
          username: "",
          alarm_type: "",
          create_time: "",
          age: "",
          sex: "",
          address: "",
        },
        {
          username: "",
          alarm_type: "",
          create_time: "",
          age: "",
          sex: "",
          address: "",
        },
        {
          username: "",
          alarm_type: "",
          create_time: "",
          age: "",
          sex: "",
          address: "",
        },
        {
          username: "",
          alarm_type: "",
          create_time: "",
          age: "",
          sex: "",
          address: "",
        },
        {
          username: "",
          alarm_type: "",
          create_time: "",
          age: "",
          sex: "",
          address: "",
        },
        {
          username: "",
          alarm_type: "",
          create_time: "",
          age: "",
          sex: "",
          address: "",
        },
        {
          username: "",
          alarm_type: "",
          create_time: "",
          age: "",
          sex: "",
          address: "",
        },
        {
          username: "",
          alarm_type: "",
          create_time: "",
          age: "",
          sex: "",
          address: "",
        },
        {
          username: "",
          alarm_type: "",
          create_time: "",
          age: "",
          sex: "",
          address: "",
        },
        {
          username: "",
          alarm_type: "",
          create_time: "",
          age: "",
          sex: "",
          address: "",
        },
        {
          username: "",
          alarm_type: "",
          create_time: "",
          age: "",
          sex: "",
          address: "",
        },
        {
          username: "",
          alarm_type: "",
          create_time: "",
          age: "",
          sex: "",
          address: "",
        },
        {
          username: "",
          alarm_type: "",
          create_time: "",
          age: "",
          sex: "",
          address: "",
        },
      ],
      // 主动呼叫报警
      alarmType1: null,
      // 红外感应报警
      alarmType2: null,
      // 是否管理员
      isAdmin: sessionStorage.getItem("authority"),
      // 区域编码
      areaCode: sessionStorage.getItem("district"),
      // 区选择
      areasOptions: [
        {
          value: "鹰潭市",
          code: "",
        },
        {
          value: "月湖区",
          code: "360602",
        },
        {
          value: "余江区",
          code: "360622",
        },
        {
          value: "贵溪市",
          code: "360681",
        },
        {
          value: "信江新区",
          code: "360603",
        },
        {
          value: "高新区",
          code: "360604",
        },
        {
          value: "龙虎山区",
          code: "360605",
        },
      ],
      // 下拉框区选择的参数
      adminArearVal: "",
      // 浏览器内的街道和区参数
      street: sessionStorage.getItem("street"),
      district: sessionStorage.getItem("district"),
    };
  },
  mounted() {
    const street = sessionStorage.getItem("street");
    const district = sessionStorage.getItem("district");
    if (street != "undefined" && street !== "null") {
      this.street = street;
    } else {
      this.street = "";
    }
    if (district != "undefined" && district !== "null") {
      this.district = district;
    } else {
      this.district = "";
    }

    this.getInfo();
    // this.ListCount();
    // this.AlarmDatas();
    this.DataCount(this.street, this.district);
    this.cumuliValueElder(this.street, this.district);
  },
  methods: {
    toggleFullScreen() {
      if (screenfull.isEnabled) {
        screenfull.toggle();
      }
    },

    fullScreen() {
      if (screenfull.isEnabled && !screenfull.isFullscreen) {
        screenfull.request();
      }
    },
    exitFullScreen() {
      if (screenfull.isEnabled && screenfull.isFullscreen) {
        screenfull.exit();
      }
    },

    // 总数
    DataCount() {
      const formdata = new FormData();
      formdata.append("street", "");
      formdata.append("district", "");
      this.$axios
        .post("https://jjyl.xbhzhyl.com.cn/daping/alarmAll", formdata)
        .then((res) => {
          // console.log(res.data, "-------");
          // 呼叫记录未处理
          this.AlarmCount = res.data.alarmContent1.toString().split("");
          // 呼叫记录已处理
          this.AlarmRecord = res.data.alarmContent2.toString().split("");
          // 护理记录
          this.NurseDataCount = res.data.nursingSum.toString().split("");
          // 老人数量
          this.OlderCount = res.data.personSum.toString().split("");
          // 主动呼叫报警
          this.alarmType1 = res.data.alarmType1.toString().split("");
          // 红外感应报警
          this.alarmType2 = res.data.alarmType2.toString().split("");
          this.ListCount(res);
          if (res.data.information.length > 0) {
            this.alarmList = res.data.information;
            this.alarmList.forEach((element) => {
              element.alarm_type =
                element.alarm_type == 0 ? "主动报警" : "红外报警";
              element.sex = element.sex == 0 ? "男" : "女";
            });
          } else {
            let alarmArr = [];
            for (let i = 0; i < 18; i++) {
              alarmArr.push({
                username: "",
                alarm_type: "",
                create_time: "",
                age: "",
                sex: "",
                address: "",
              });
            }
            this.alarmList = alarmArr;
          }
        });
    },
    // 累计评估老人
    cumuliValueElder() {
      const formdata = new FormData();
      formdata.append("street", "");
      formdata.append("district", "");
      this.$axios
        .post("https://jjyl.xbhzhyl.com.cn/daping/evaluateAll", formdata)
        .then((res) => {
          if (res.data) {
            // 累计评估
            this.Rljpg = res.data.ljpg.toString().split("").reverse();
            if (this.Rljpg.length < 7) {
              let num = 7 - this.Rljpg.length;
              for (let i = 0; i < num; i++) {
                this.Rljpg.push(0);
              }
            }
            this.Rpgqk = res.data.pgqk;
            this.Rjzqk = res.data.jzqk;
            this.Rzrc = res.data.zrc.toString().split("");
            // console.log(this.Rzrc, "Rzrc");
            this.pgtotal.push(res.data.nlwhNum);
            this.pgtotal.push(res.data.qdsnNum);
            this.pgtotal.push(res.data.zdsnNum);
            this.pgtotal.push(res.data.zhongdsnNum);
            this.pglist.push(res.data.nlwh);
            this.pglist.push(res.data.qdsn);
            this.pglist.push(res.data.zdsn);
            this.pglist.push(res.data.zhongdsn);
            this.printChartsPG();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 报警列表
    AlarmDatas() {
      this.$axios
        .post(
          "AlarmDatas/List",
          this.$qs.stringify({
            Page: 1,
            PageSize: 18,
          })
        )
        .then((res) => {
          this.alarmList = res.data.data;
          this.alarmList.forEach((element) => {
            if (element.alarm_type == 0) {
              element.alarm_type = "主动报警";
            } else if (element.alarm_type == 1) {
              element.alarm_type = "红外报警";
            }
            if (element.sex == 0) {
              element.sex = "男";
            } else if (element.sex == 1) {
              element.sex = "女";
            }
            element.create_time = `${element.create_time.split("T")[0]} ${
              element.create_time.split("T")[1]
            }`;
          });
          console.log(this.alarmList);
          console.log(this.alarmList.slice(0, 3));
          console.log(this.alarmList.slice(3, 6));
        });
    },
    //街道人数列表
    ListCount(res) {
      // this.$axios
      //   .post("OlderDatas/ListCount", this.$qs.stringify({}))
      //   .then((res) => {
      this.aaa = res.data.pgqk;
      let pgqk = [
        { type: "", num: "" },
        { type: "", num: "" },
        { type: "", num: "" },
        { type: "", num: "" },
        { type: "", num: "" },
        { type: "", num: "" },
      ];
      res.data.pgqk.map((el, index) => {
        console.log(el);
        console.log(index);
        if (el) pgqk[index] = el;
      });

      const params = [
        {
          num: 634,
          type: "月湖区",
        },
        {
          num: 53,
          type: "信江新区",
        },
        {
          num: 43,
          type: "高新区",
        },
        {
          num: 22,
          type: "余江区",
        },
        {
          num: 19,
          type: "贵溪市",
        },
        {
          num: 1,
          type: "南丰县",
        },
      ];
      if (pgqk && pgqk.length > 0) {
        console.log(pgqk);
      } else {
        pgqk = params;
      }
      // this.aaa = res.data.data;
      // console.log(res.data.data[0].count);
      let myChart = this.$echarts.init(document.getElementById("myChartaa"));
      let option = {
        title: {
          // text: "南丁格尔玫瑰图",
          // subtext: "纯属虚构",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },

        series: [
          {
            name: "街道地址：老人数量",
            type: "pie",
            radius: [20, 140],
            center: ["50%", "50%"],
            roseType: "radius",
            itemStyle: {
              borderRadius: 5,
            },
            label: {
              show: false,
            },
            // emphasis: {
            //   label: {
            //     show: true,
            //   },
            // },
            data: [
              {
                value: pgqk[0].num,
                name: pgqk[0].type,
                itemStyle: {
                  color: "#ec7e34",
                },
              },
              {
                value: pgqk[1].num,
                name: pgqk[1].type,
                itemStyle: {
                  color: "#f1c433",
                },
              },
              {
                value: pgqk[2].num,
                name: pgqk[2].type,
                itemStyle: {
                  color: "#bcd643",
                },
              },
              {
                value: pgqk[3].num,
                name: pgqk[3].type,
                itemStyle: {
                  color: "#61c3cc",
                },
              },
              {
                value: pgqk[4].num,
                name: pgqk[4].type,
                itemStyle: {
                  color: "#4c9ad2",
                },
              },
              // {
              //   value: res.data.pgqk[5].num,
              //   name: res.data.pgqk[5].type,
              //   itemStyle: {
              //     color: "#216f6b",
              //   },
              // },
              // {
              //   value: res.data.pgqk[6].num,
              //   name: res.data.pgqk[6].type,
              //   itemStyle: {
              //     color: "#395858",
              //   },
              // },
            ],
          },
        ],
      };
      myChart.setOption(option);
      // window.onresize = function () {
      //   setTimeout(function () {
      //     myChart.resize();
      //   }, 10);
      // };
      // this.tableData = res.data.data;
      // console.log(this.Name);
      // console.log(this.Username);
      // });
    },
    videoclick() {
      this.videoshow = !this.videoshow;
    },
    requestFullScreen(element) {
      var de = document.querySelector(element) || document.documentElement;
      if (de.requestFullscreen) {
        de.requestFullscreen();
      } else if (de.mozRequestFullScreen) {
        de.mozRequestFullScreen();
      } else if (de.webkitRequestFullScreen) {
        de.webkitRequestFullScreen();
      }
    },
    exitFullscreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      }
    },
    getInfo() {
      this.$axios
        .get("http://39.100.254.133:8556/BigScreen", {})
        .then((res) => {
          if (res.data) {
            // console.log(res.data, "大屏信息");
            // console.log(res.data.xfje);
            // 消费金额
            this.Lxfje = res.data.xfje.toString().split("").reverse();
            if (this.Lxfje.length < 7) {
              let num = 7 - this.Lxfje.length;
              for (let i = 0; i < num; i++) {
                this.Lxfje.push(0);
              }
            }
            this.Lxfrc = res.data.xfrc.toString().split("");
            console.log(this.Lxfrc, "this.Lxfrc");
            this.LlxtjList = res.data.lxtj;
            let sum2 = 0;
            for (let key in res.data.lxtj) {
              sum2 += res.data.lxtj[key];
            }
            console.log(sum2);
            this.Llxtj = sum2.toString().split("");
            for (let val of res.data.xftj) {
              if (this.machine[val.xfjh]) {
                this.Lxftj.push(val);
              }
            }
            // console.log(this.Lxftj, "1234567");
            // this.Lxftj = res.data.xftj;
            this.paintChartsLB();
          }
        });
      // .catch(err => {
      //   console.log("获取失败");
      // });
    },
    // 滑动
    changexfje(index) {
      if (this.scrollnum != index) {
        this.scrollnum = index;
      }
    },
    changejzqk(index) {
      if (this.scrollnum2 != index) {
        this.scrollnum2 = index;
      }
    },
    changeRB() {
      if (this.scrollnum3 == 0) {
        this.scrollnum3 = 1;
      } else {
        this.scrollnum3 = 0;
      }
    },
    // 左下图
    paintChartsLB() {
      // console.log("左下charts图");
      let arr = [];
      for (let key in this.LlxtjList) {
        arr.push(this.LlxtjList[key]);
      }
      this.$nextTick(() => {
        // 初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById("chartsLB"));
        let option = {
          // title: {
          //     text: 'ECharts 入门示例'
          // },
          tooltip: {},
          series: [
            {
              // name: '销量',
              type: "pie",
              label: {
                normal: {
                  position: "inner",
                  show: false,
                },
              },
              hoverAnimation: false,
              left: -40,
              top: -10,
              width: "120%",
              height: "120%",
              itemStyle: {
                color: (params) => {
                  // build a color map as your need.
                  var colorList = [
                    "#0DB3D9",
                    "#0367A6",
                    "#D93D4A",
                    "#F2CB05",
                    "#F29422",
                    "#92c8b1",
                    "#2f4553",
                  ];
                  return colorList[params.dataIndex];
                },
              },
              data: arr,
            },
          ],
        };
        myChart.setOption(option);
      });
    },
    //老人评估情况图
    printChartsPG() {
      let arr = [];
      let arr2 = [];
      arr2.push(this.Rpgqk[0]);
      arr2.push(this.Rpgqk[3]);
      arr2.push(this.Rpgqk[1]);
      arr2.push(this.Rpgqk[2]);
      for (let val of arr2) {
        arr.push({
          value: val.num,
          name:
            val.type == 0
              ? "能力完好"
              : val.type == 1
              ? "轻度失能"
              : val.type == 2
              ? "中度失能"
              : "重度失能",
          itemStyle: {
            color:
              val.type == 0
                ? "#00C6D7"
                : val.type == 1
                ? "#71C400"
                : val.type == 2
                ? "#E9551B"
                : "#F4282D",
          },
        });
      }
      this.$nextTick(() => {
        // 初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById("pieimg"));

        let option = {
          tooltip: {
            // trigger: "item",
            formatter: "{b}: {c} ({d}%)",
          },
          label: {
            formatter: "{d}%",
          },
          // legend: {
          //   orient: "vertical",
          //   left: 10,
          //   data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
          // },
          series: [
            {
              name: "访问来源",
              type: "pie",
              radius: ["50%", "70%"],
              avoidLabelOverlap: false,
              // label: {
              //   show: false,
              //   position: "center",
              // },
              // emphasis: {
              //   label: {
              //     show: true,
              //     fontSize: "30",
              //     fontWeight: "bold",
              //   },
              // },
              labelLine: {
                show: false,
              },
              data: arr,
            },
          ],
        };

        myChart.setOption(option);
      });
    },
    // admin选择区
    adminSelectAreas(val) {
      this.DataCount(this.street, val);
      this.cumuliValueElder(this.street, val);
    },
  },
  computed: {
    aaa0Name() {
      if (this.aaa[0]) {
        return this.aaa[0].type;
      } else {
        return "";
      }
    },
    aaa1Name() {
      if (this.aaa[1]) {
        return this.aaa[1].type;
      } else {
        return "";
      }
    },
    aaa2Name() {
      if (this.aaa[2]) {
        return this.aaa[2].type;
      } else {
        return "";
      }
    },
    aaa3Name() {
      if (this.aaa[3]) {
        return this.aaa[3].type;
      } else {
        return "";
      }
    },
    aaa4Name() {
      if (this.aaa[4]) {
        return this.aaa[4].type;
      } else {
        return "";
      }
    },
    aaa5Name() {
      if (this.aaa[5]) {
        return this.aaa[5].type;
      } else {
        return "";
      }
    },
    // 判断当前登录账号归属哪个区
    checkArea() {
      if (this.areaCode == "360602") {
        // 月湖区
        return require("../assets/BigScreen/area_1.png");
      } else if (this.areaCode == "360622") {
        //余江区
        return require("../assets/BigScreen/area_6.png");
      } else if (this.areaCode == "360681") {
        // 贵溪市
        return require("../assets/BigScreen/area_2.png");
      } else if (this.areaCode == "360603") {
        // 信江新区
        return require("../assets/BigScreen/area_3.png");
      } else if (this.areaCode == "360604") {
        // 高新区
        return require("../assets/BigScreen/area_4.png");
      } else if (this.areaCode == "360605") {
        // 龙虎山区
        return require("../assets/BigScreen/area_5.png");
      } else {
        // 鹰潭市
        return require("../assets/BigScreen/title_center.png");
      }
    },
  },
};
</script>

<style lang="less">
#bigscreen {
  position: fixed;
  box-sizing: border-box;
  display: flex;
  // width: 100%;
  height: 100%;
  // max-width: 2160px;
  margin: 0 auto;
  background: #0e0e40;
  padding: 0.19rem 0.26rem 0 0.26rem;
  font-size: 0.18rem;
  top: 0;
  left: 0;
  flex-direction: column;
  z-index: 2000;
  .el-carousel__item .listdiv {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    > div {
      width: 100%;
      height: 33.3%;
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      display: flex;
      flex-direction: column;
      justify-content: center;
      cursor: pointer;
      > div {
        padding-left: 0.1rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-bottom: 0.15rem;
        box-sizing: border-box;
        > img {
          margin-right: 0.1rem;
        }
        > span {
          box-sizing: border-box;
          font-size: 0.18rem;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #0bb9ff;
        }
        > .warning {
          padding-left: 0.1rem;
          text-align: left;
          font-size: 0.14rem;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #ff4444;
        }
        > .time {
          padding-left: 0.1rem;
          text-align: left;
          font-size: 0.14rem;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: lightgray;
        }
      }
      > span {
        padding-left: 0.1rem;
        text-align: left;
        font-size: 0.14rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #ffffff;
      }
    }
  }

  // .el-carousel__item:nth-child(2n) {
  //   background-color: #99a9bf;
  // }

  // .el-carousel__item:nth-child(2n + 1) {
  //   background-color: #d3dce6;
  // }
  > button {
    position: absolute;
    cursor: pointer;
    z-index: 100;
  }
  // 标题
  > .title {
    width: 100%;
    height: 1.04rem;
    display: flex;
    justify-content: center;
    align-items: center;
    > .left {
      position: absolute;
      display: flex;
      align-items: center;
      // left: -0.5rem;
      left: 0rem;
      > .lefttext {
        position: absolute;
        right: 1.04rem;
      }
    }
    > .center {
      > span {
        font-family: "微软雅黑";
        font-size: 0.4rem;
        color: #44c8fc;
      }
    }
    > .right {
      position: absolute;
      display: flex;
      align-items: center;
      // right: -0.5rem;
      right: 0rem;
      > .righttext {
        position: absolute;
        left: 1.04rem;
      }
      > .select-areas {
        position: absolute;
        left: 4rem;
        z-index: 9;
      }
      > .biglist {
        display: flex;
        align-items: center;
        position: absolute;
        right: 80px;
        top: 20px;
        z-index: 9999;
        // color: #fff;

        > i {
          color: #fff;
        }
        .el-link {
          color: #fff;
          margin-right: 20px;
        }
      }
      // > i {
      //   position: absolute;
      //   right: 20px;
      //   top: 20px;
      //   color: #fff;
      // }

      .btn {
        cursor: pointer;
        position: relative;
        padding: 10px 20px;
        background: rgb(161, 225, 250);
        font-size: 22px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 10px;
        transition: all 1s;
        margin-right: 20px;
        &:after,
        &:before {
          content: " ";
          width: 10px;
          height: 10px;
          position: absolute;
          border: 0px solid #fff;
          transition: all 1s;
        }
        &:after {
          top: -1px;
          left: -1px;
          border-top: 5px solid black;
          border-left: 5px solid black;
        }
        &:before {
          bottom: -1px;
          right: -1px;
          border-bottom: 5px solid black;
          border-right: 5px solid black;
        }
        &:hover {
          border-top-right-radius: 0px;
          border-bottom-left-radius: 0px;
          // background:rgba(0,0,0,.5);
          // color:white;
          &:before,
          &:after {
            width: 100%;
            height: 100%;
            // border-color:white;
          }
        }
      }
    }
  }
  // 中间
  > .center {
    width: 100%;
    height: 7.58rem;
    display: flex;
    padding: 0.26rem 0 0.22rem 0;
    box-sizing: border-box;
    justify-content: space-between;
    align-items: center;
    > .left,
    > .right {
      width: 4.74rem;
      height: 100%;
    }
    // 左展示框
    > .left {
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      padding-right: 0.19rem;
      position: relative;
      align-items: flex-end;
      justify-content: flex-end;
      .title {
        width: 100%;
        height: 0.63rem;
        display: flex;
        align-items: center;
        > img {
          margin: 0 0.15rem 0 0.25rem;
        }
        > span {
          font-size: 0.18rem;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #8eb9ed;
        }
      }
      > .one {
        width: 4.74rem;
        height: 2.71rem;
        background: url("../assets/BigScreen/back4.png") no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: -1.21rem;
        right: 0rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding-left: 0.29rem;
        box-sizing: border-box;
        > .content {
          width: 100%;
          height: 0.88rem;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          padding-bottom: 0.22rem;
          // 测试点------------------------------------------
          > .xfje {
            width: 3.45rem;
            height: 0.4rem;
            margin-left: 0.4rem;
            display: flex;
            justify-content: space-between;
            flex-direction: row-reverse;
            > div {
              width: 0.35rem;
              height: 100%;
              overflow: hidden;
              position: relative;
              > img {
                position: absolute;
              }
            }
          }
          // > img {
          //   margin-left: 0.4rem;
          // }
        }
      }
      > .two {
        width: 4.26rem;
        height: 1.51rem;
        background: url("../assets/BigScreen/back2.png") no-repeat;
        background-size: 100% 100%;
        margin-bottom: 0.15rem;
        > .content {
          width: 100%;
          height: 0.88rem;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          padding-bottom: 0.22rem;
          > .xfrc {
            height: 0.4rem;
            margin-left: 0.4rem;
            display: flex;
            justify-content: space-between;
            > div {
              width: 0.35rem;
              height: 100%;
              overflow: hidden;
              position: relative;
              > img {
                position: absolute;
              }
            }
            > div:not(:first-child) {
              margin-left: 0.1666rem;
            }
          }
          // > img {
          //   margin-left: 0.4rem;
          // }
          > span {
            padding-top: 0.21rem;
            margin-left: 0.19rem;
            font-size: 0.18rem;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #a9a9a9;
          }
        }
      }
      > .three {
        width: 4.26rem;
        height: 3.8rem;
        background: url("../assets/BigScreen/back1.png") no-repeat;
        background-size: 100% 100%;
        > .list {
          width: 100%;
          height: 2.6rem;
          box-sizing: border-box;
          padding: 0 0.2rem;
          // overflow: hidden;
          position: relative;
          > div {
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: relative;
            > div {
              transition: 0.5s linear;
              position: absolute;
              height: 100%;
              display: flex;
              > div {
                width: 100%;
                height: 100%;
                min-width: 3.86rem;
                > div {
                  width: 100%;
                  height: 0.32rem;
                  display: flex;
                  flex-direction: column;
                  justify-content: space-between;
                  align-items: flex-start;
                  > span {
                    font-size: 0.14rem;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #ffffff;
                  }
                  > .outbox {
                    width: 100%;
                    height: 0.07rem;
                    background: #071437;
                    box-sizing: border-box;
                    > .innerbox {
                      height: 100%;
                      width: 50%;
                      background: #1998f9;
                    }
                  }
                }
                > div:not(:last-child) {
                  margin-bottom: 0.25rem;
                }
              }
            }
          }
        }
        > .scroll {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 0.55rem;
          > .backblue {
            background: #1998f9;
          }
          > button {
            padding: 0;
            width: 0.08rem;
            height: 0.08rem;
            border: none;
            border-radius: 0.04rem;
            margin: 0 0.1rem;
            cursor: pointer;
            background: #020715;
            outline: none;
          }
        }
      }
    }
    // 中间展示框
    > .center {
      width: 9.05rem;
      height: 100%;
      background: url(../assets/BigScreen/back6.png) no-repeat;
      background-size: 100% 100%;
      > .title {
        width: 100%;
        height: 0.63rem;
        display: flex;
        align-items: center;
        justify-content: center;
        > img {
          margin: 0 0.15rem 0 0.25rem;
        }
        > span {
          font-size: 0.18rem;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #8eb9ed;
        }
      }
      > .title1 {
        width: 100%;
        height: 0.63rem;
        display: flex;
        align-items: center;
        > img {
          margin: 0 0.15rem 0 0.25rem;
        }
        > span {
          font-size: 0.18rem;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #8eb9ed;
        }
      }
      > .video {
        margin-top: 0.08rem;
        width: 100%;
        height: 2.91rem;
        display: flex;
        padding: 0 0.1rem;
        box-sizing: border-box;
        justify-content: space-between;
        > .videoBox {
          width: 5.06rem;
          height: 100%;
          display: flex;
          align-items: center;
          > img {
            position: relative;
            left: -0.4rem;
            top: 0.1rem;
          }
          > .boxlist {
            width: 1.7rem;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            > div {
              width: 100%;
              display: flex;
              align-items: center;
              margin: 0.15rem 0;
              > div {
                width: 0.12rem;
                height: 0.12rem;
                background: lemonchiffon;
                margin-right: 0.1rem;
              }
              > span {
                font-size: 0.12rem;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #ffffff;
              }
            }
          }
        }

        > .oldPeople {
          width: 3.49rem;
          height: 100%;
          display: flex;
          flex-direction: column;
          // > div {
          //   width: 100%;
          //   height: 33.3%;
          //   border-bottom: 1px solid rgba(255, 255, 255, 0.2);
          //   display: flex;
          //   flex-direction: column;
          //   justify-content: center;
          //   cursor: pointer;
          //   > div {
          //     padding-left: 0.1rem;
          //     display: flex;
          //     flex-direction: row;
          //     align-items: center;
          //     margin-bottom: 0.15rem;
          //     box-sizing: border-box;
          //     > img {
          //       margin-right: 0.1rem;
          //     }
          //     > span {
          //       box-sizing: border-box;
          //       font-size: 0.18rem;
          //       font-family: Microsoft YaHei;
          //       font-weight: bold;
          //       color: #0bb9ff;
          //     }
          //     > .warning {
          //       padding-left: 0.1rem;
          //       text-align: left;
          //       font-size: 0.14rem;
          //       font-family: Microsoft YaHei;
          //       font-weight: 400;
          //       color: #ff4444;
          //     }
          //   }
          //   > span {
          //     padding-left: 0.1rem;
          //     text-align: left;
          //     font-size: 0.14rem;
          //     font-family: Microsoft YaHei;
          //     font-weight: 400;
          //     color: #ffffff;
          //   }
          // }
        }
      }
      > .Num {
        width: 100%;
        height: 1.65rem;
        display: flex;
        justify-content: space-around;
        box-sizing: border-box;
        padding-top: 0.3rem;
        img {
          margin: 0px 9px;
          flex-shrink: 0;
          width: 0.34rem;
          height: 0.4rem;
        }
        > div {
          // width: 33%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: center;

          > span {
            font-size: 0.18rem;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #ffffff;
          }
        }
      }
      > .Num2 {
        width: 100%;
        height: 1.4rem;
        padding: 0 0.25rem;
        box-sizing: border-box;
        display: flex;
        > div {
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: space-evenly;
          > div {
            display: flex;
            align-items: center;
            > img {
              margin-right: 0.1rem;
            }
            > span {
              font-size: 0.18rem;
              font-family: Microsoft YaHei;
              font-weight: bold;
              color: #ffffff;
            }
          }
          > div:nth-of-type(2) {
            display: flex;
          }
          > span {
            margin-left: 0.1rem;
            font-size: 0.18rem;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #979797;
          }
        }
      }
    }
    // 右边展示框
    > .right {
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      padding-left: 0.21rem;
      position: relative;
      align-items: flex-start;
      justify-content: flex-end;
      .title {
        width: 100%;
        height: 0.53rem;
        display: flex;
        align-items: center;
        > img {
          margin: 0 0.15rem 0 0.25rem;
        }
        > span {
          font-size: 0.18rem;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #8eb9ed;
        }
      }
      > .one {
        width: 4.74rem;
        height: 2.71rem;
        background: url("../assets/BigScreen/back3.png") no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: -1.21rem;
        left: -0.07rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding-left: 0.29rem;
        box-sizing: border-box;
        > .content {
          width: 100%;
          height: 0.88rem;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          padding-bottom: 0.22rem;
          > img {
            margin-left: 0.4rem;
          }
          // 测试
          > .xfje {
            width: 3.45rem;
            height: 0.4rem;
            margin-left: 0.4rem;
            display: flex;
            justify-content: space-between;
            flex-direction: row-reverse;
            > div {
              width: 0.35rem;
              height: 100%;
              overflow: hidden;
              position: relative;
              > img {
                position: absolute;
              }
            }
          }
        }
      }
      > .three {
        width: 4.26rem;
        height: 5.43rem;
        background: url("../assets/BigScreen/back7.png") no-repeat;
        background-size: 100% 100%;
        > .pieimg {
          display: flex;
          align-items: center;
          justify-content: space-around;
          position: relative;
          height: 1.36rem;
        }
        // R3
        > .pielist {
          width: 100%;
          height: 0.84rem;
          box-sizing: border-box;
          padding: 0.16rem 0.2rem 0.24rem;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          > div {
            width: 100%;
            display: flex;
            justify-content: space-between;
            > div {
              width: 45%;
              display: flex;
              align-items: center;
              justify-content: space-between;
              > div {
                display: flex;
                align-items: center;
                > div {
                  width: 0.24rem;
                  height: 0.07rem;
                  border-radius: 0.03rem;
                }
                > span {
                  margin-left: 0.1rem;
                  font-size: 0.14rem;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: #ffffff;
                }
              }
              > span {
                font-size: 0.14rem;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #ffffff;
              }
            }
          }
        }
        > .list {
          width: 100%;
          height: 2.28rem;
          box-sizing: border-box;
          padding: 0 0.2rem;
          display: flex;
          flex-direction: column;
          > .title {
            width: 100%;
            height: 0.38rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #0d6ddd;
            > span {
              width: 1.2rem;
              font-size: 0.14rem;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #3fc8c3;
              text-align: center;
            }
          }
          // 最外box
          > .qk {
            width: 100%;
            height: 1.9rem;
            position: relative;
            overflow: hidden;
            // 滑块box
            > div {
              height: 100%;
              display: flex;
              position: absolute;
              top: 0;
              transition: 0.5s linear;
              // 小box
              > div {
                position: relative;
                width: 3.86rem;
                display: flex;
                flex-direction: column;
                > div {
                  width: 100%;
                  height: 0.38rem;
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  > span {
                    width: 1.2rem;
                    font-size: 0.14rem;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #3fc8c3;
                    text-align: center;
                  }
                }
                > div:nth-child(even) {
                  background: rgba(13, 109, 221, 0.2);
                }
              }
            }
          }
        }
        > .scroll {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 0.37rem;
          box-sizing: border-box;
          > .backblue {
            background: #1998f9;
          }
          > button {
            padding: 0;
            width: 0.08rem;
            height: 0.08rem;
            border: none;
            border-radius: 0.04rem;
            margin: 0 0.1rem;
            cursor: pointer;
            background: #020715;
            outline: none;
          }
        }
      }
    }
  }
  // 尾层
  > .tail {
    width: 100%;
    height: 1.51rem;
    display: flex;
    justify-content: space-between;
    padding: 0 0.25rem;
    box-sizing: border-box;
    > .left,
    > .right {
      width: 9.01rem;
      height: 100%;
      background: url(../assets/BigScreen/back5.png) no-repeat;
      background-size: 100% 100%;
    }
    // 左下
    > .left {
      display: flex;
      align-items: center;
      padding: 0 0 0 0.46rem;
      box-sizing: border-box;
      // 测试点-------------------
      > .text {
        width: 1.96rem;
        height: 0.95rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        > span {
          font-size: 0.18rem;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #ffffff;
        }
        > div {
          display: flex;
          align-items: flex-end;
          position: relative;
          > span {
            font-size: 0.18rem;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #a9a9a9;
            margin-right: 0.15rem;
          }
          > div {
            position: absolute;
            height: 0.4rem;
            // width: 1rem;
            display: flex;
            left: 0.4rem;
            > div {
              width: 0.35rem;
              height: 100%;
              overflow: hidden;
              position: relative;
              > img {
                position: absolute;
              }
            }
            > div:not(:last-child) {
              margin-right: 0.1rem;
            }
          }
        }
      }
      > #chartsLB {
        width: 1.65rem;
        height: 1.08rem;
        margin-left: 1rem;
      }
      // > img {
      //   margin-left: 1rem;
      // }
      > .pie {
        width: 3.5rem;
        height: 1.07rem;
        > div {
          width: 100%;
          height: 33.3%;
          display: flex;
          > div {
            width: 50%;
            height: 100%;
            display: flex;
            align-items: center;
            position: relative;
            > div {
              width: 0.12rem;
              height: 0.12rem;
              margin-right: 0.1rem;
            }
            > span {
              font-size: 0.12rem;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #ffffff;
            }
            > span:last-child {
              position: absolute;
              right: 0.1rem;
            }
          }
        }
      }
    }
    // 右下
    > .right {
      display: flex;
      align-items: center;
      padding: 0 0 0 0.44rem;
      box-sizing: border-box;
      > .text {
        width: 2.4rem;
        height: 0.95rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-right: 0.4rem;

        > span {
          font-size: 0.18rem;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #ffffff;
          text-align: left;
        }
        > div {
          display: flex;
          align-items: flex-end;
          justify-content: space-between;
          > span {
            font-size: 0.18rem;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #a9a9a9;
            padding-top: 0.22rem;
          }
          > div {
            height: 0.4rem;
            // width: 1rem;
            display: flex;
            > div {
              width: 0.35rem;
              height: 100%;
              overflow: hidden;
              position: relative;
              > img {
                position: absolute;
              }
            }
            > div:not(:last-child) {
              margin-right: 0.1rem;
            }
          }
        }
      }
      > button {
        width: 0.2rem;
        height: 1.4rem;
        display: flex;
        text-align: center;
        cursor: pointer;
        background: none;
        color: white;
        border: none;
        align-items: center;
        outline: none;
      }
      > .list {
        width: 5.3rem;
        height: 1.2rem;
        display: flex;
        position: relative;
        overflow: hidden;
        > div {
          position: absolute;
          display: flex;
          top: 0;
          transition: 0.5s linear;
          > div {
            width: 2.65rem;
            height: 100%;
            // background: lightblue;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            padding-right: 0.2rem;
            > div {
              width: 100%;
              height: 0.12rem;
              display: flex;
              align-items: center;
              > span {
                font-size: 0.12rem;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #ffffff;
              }
            }
            > div:first-child {
              height: 0.14rem;
              > div {
                width: 0.24rem;
                height: 0.07rem;
                border-radius: 0.03rem;
              }
              > span {
                font-size: 0.14rem;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #ffffff;
                margin: 0 0.08rem;
              }
            }
            > div:not(:last-child) {
              margin-bottom: 0.13rem;
            }
            > div:not(:first-child) {
              justify-content: space-between;
              > span {
                width: 0.53rem;
              }
              > div {
                width: 0.79rem;
                height: 0.05rem;
                border-radius: 0.02rem;
                background: #180202;
                > div {
                  height: 100%;
                  border-radius: 0.02rem;
                }
              }
            }
          }
        }
      }
    }
  }
  // 拖动窗口
  > .blackBox {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    top: 0;
    left: 0;
    > .theVideo {
      width: 10rem;
      height: 5.3rem;
      background: lemonchiffon;
      position: absolute;
      flex-direction: column;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      > .boxBar {
        width: 100%;
        height: 0.3rem;
        background: lightgray;
        position: relative;
        display: flex;
        align-items: center;
        > button {
          position: absolute;
          right: 0;
          width: 0.3rem;
          height: 0.3rem;
          padding: 0;
          border: 0;
          box-sizing: border-box;
          font-size: 0.3rem;
          cursor: pointer;
          background: none;
          color: #a9a9a9;
          outline: none;
        }
        > button:hover {
          color: black;
        }
      }
      > .videoBox {
        width: 100%;
        height: 5rem;
        background: lightgoldenrodyellow;
      }
    }
  }
}
</style>
